<template>
  <div class="home-container">
    <div class="home-inner-container">
      <div class="top">
        <LiveBanner />
      </div>
      <div class="banner">
        <img src="@/assets/imgs/banner.webp" />
      </div>
      <div class="match-list">
        <MatchList />
      </div>
      <div>
        <LiveItem />
      </div>
      <div>
        <MatchRecommend />
      </div>
      <div>
        <InfoItem />
      </div>
      <div>
        <ScoreItem />
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import LiveBanner from './live-banner.vue'
import MatchList from './match-list.vue'
import LiveItem from './live-item.vue'
import MatchRecommend from './match-recommend.vue'
import InfoItem from './info-item.vue'
import ScoreItem from './score-item.vue'
import Footer from '@/components/footer.vue'
import { ref } from 'vue'
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  // margin: 0 auto;
  padding-top: 20px;
  img {
    width: 100%;
  }
}
.top {
  padding-top: 5px;
}
</style>
<style lang="scss" scoped>
.home-container {
  width: 100%;
  // display: flex;
  // justify-content: center;
  background: #f5f7ff;
  //   background-color: #f5f5f5; /* 示例背景色 */
  //   padding: 20px; /* 示例内边距 */
  box-sizing: border-box;
  min-height: 100vh;
  //   height: 100vh;
  //   height: 94px;
}

.home-inner-container {
  // width: 100%;
  min-width: 1200px;
  max-width: 1400px;
  //   background-color: #ffffff; /* 示例背景色 */
  //   padding: 20px; /* 示例内边距 */
  box-sizing: border-box;
  margin: 0 auto;

  background: #f5f7ff;
  .top{
    min-width: 1400px;
    margin: 0 auto;
  }
}

/* 最小宽度限制 */
@media (max-width: 1400px) {
  .inner-container {
    // width: 1400px;
    // overflow-x: auto; /* 如果内容超过1400px，显示滚动条 */
  }
}
</style>
